<template>
  <div class="login-container">
    <div class="form-wrap">
      <div class="title">哈哈酒店后台管理</div>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          label-width="120px"
          class="demo-ruleForm"
      >
        <el-input class="login-input" v-model="ruleForm.username" size="large" style="margin-bottom: 40px">
          <template #prefix>
            <img style="width: 26px" src="../../assets/image/login-user.png" alt="">
          </template>
        </el-input>
        <el-input class="login-input" v-model="ruleForm.password" size="large" :type="showPassword?'text':'password'"
                  autocomplete="off">
          <template #prefix>
            <img style="width: 26px" src="../../assets/image/login-lock.png" alt="">
          </template>
          <template #suffix>
            <img v-if="showPassword" style="width: 26px;cursor: pointer" src="../../assets/image/login-p.png" alt=""
                 @click="showPassword = false">
            <img v-else style="width: 26px;cursor: pointer" @click="showPassword = true"
                 src="../../assets/image/login-q.png" alt="">
          </template>
        </el-input>
        <el-button type="primary" style="width: 100%;margin-top: 40px" @click="submitForm" size="large"
        >登录
        </el-button
        >
      </el-form>
    </div>

    <div class="back-home" @click="onClickBackHome">返回首页</div>
  </div>
</template>

<script setup lang="ts">
import $api from '@/api/index'
import {onMounted, reactive, ref} from 'vue'
import {useUserStore} from '@/stores/user'
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const showPassword = ref(false)
onMounted(() => {
  localStorage.clear()
})

const ruleForm = reactive({
  username: '',
  password: ''
})

let loading = false

const submitForm = () => {
  if (loading) {
    return;
  }
  if (ruleForm.password === '') {
    return
  } else if (ruleForm.username === '') {
    return
  } else {
    loading = true
    $api.userApi.login(ruleForm).then(res => {
      localStorage.setItem('tokenValue', res.tokenValue)
      localStorage.setItem('tokenName', res.tokenName)

      $api.userApi.userinfo().then(res => {
        if (res.rule !== 'ADMIN' && res.rule !== 'FRONT_USER') {
          ElMessage({
            message: "非相关人员，禁止登录后台",
            type: 'error',
          })
        } else {
          localStorage.setItem("userinfo", JSON.stringify(res))
          localStorage.setItem('rule', res.rule)
          loading = false
          router.push('/admin')
        }

      }).catch(() => {
        loading = false
      })
    }).catch(() => {
      loading = false
    })
  }
}
const onClickBackHome = () => {
  router.push("/")
}
</script>

<style lang="scss">
.login-input {
  height: 48px;

  .el-input__wrapper {
    background-color: #283443 !important;
    border: 1px solid #3e4957 !important;
    box-shadow: none !important;

    .el-input__inner {
      background-color: #283443 !important;
      color: #fff !important;
    }
  }
}
</style>
<style scoped lang="scss">
.login-container {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2d3a4b;


  .form-wrap {
    width: 60%;
    max-width: 400px;
    min-width: 300px;

    > .title {
      text-align: center;
      margin-bottom: 50px;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
    }

    .label {
      color: rgb(96, 98, 102);
      font-size: 14px;
      margin-top: 30px;
      margin-bottom: 16px;
    }
  }
}

.back-home {
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  position: fixed;
  top: 30px;
  right: 30px;
}
</style>